<template>
	<view class="Global">

		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>



		<scroll-view scroll-y="true" :style="'height:'+scrollViewHeight+'px'">
			<view class="ContentScrollView">

				<!-- 列表数据  start-->
				<view class="listDataOut">

					<view class="listDataInner" >

						<view class="listDataInnerTop">
							<view class="listDataInnerTopLeft">
								<image class="listDataInnerTopLeftImg" v-if="itemdata.styleImgs!=''" :src="apiUrl+itemdata.styleImgs" mode=""></image>
								<image class="listDataInnerTopLeftImg" v-else src="/static/cuttingorder/cloth.png" mode=""></image>
							</view>
							<view class="listDataInnerTopRight">
								<text class="listDataInnerTopRightText">订单编号：{{itemdata.orderCode}}</text>
								<text class="listDataInnerTopRightText">款式：{{itemdata.styleName}}</text>
								<text class="listDataInnerTopRightText">日期：{{itemdata.createTime}}</text>
                <text class="listDataInnerTopRightText" v-if="itemdata.status=='0'">状态：未生产</text>
                <text class="listDataInnerTopRightText" v-if="itemdata.status=='1'">状态：生产中</text>
                <text class="listDataInnerTopRightText" v-if="itemdata.status=='2'">状态：生产完成</text>
							</view>

<!--							<view class="listDataInnerTopRightImgBg">-->
<!--								<image class="listDataInnerTopRightImg"-->
<!--									src="../../../static/gongzuotai/shanchu-red@2x.png" mode="">-->
<!--								</image>-->
<!--							</view>-->

						</view>


						<view class="progress-box_out">

							<progress class="progress-box_progress" :percent="itemdata.percent" activeColor="#0081FF"
								backgroundColor="#ECF5FD" stroke-width="4" active='true' />
							<text class="progress-box_text">完成度 </text>
							<text class="progress-box_text1">{{itemdata.percent}}%</text>
						</view>

					</view>

				</view>

				<!-- 列表数据  end-->


				<view class="Content">





					<!-- 九宫格列表 开始 -->
					<view class="Content_JiuGongGe">


						<view class="Content_JiuGongGe_Title_Out">
							<text class="Content_JiuGongGe_Title">九宫格列表</text>
						</view>


						<view class="Content_JiuGongGe_List_OutSide">

							<view class="Content_JiuGongGe_List_Out" v-for="(item,index) in jiugonggeListData">

								<view class="Content_JiuGongGe_List" v-if="index==0">

									<text class="Content_JiuGongGe_List_Blue">{{item.title}}</text>
									<text class="Content_JiuGongGe_List_Blue"
										v-for="(itemIner,Index) in item.data">{{itemIner}}</text>
									<!-- <text class="Content_JiuGongGe_List_Blue">{{item.size}}</text>
									<text class="Content_JiuGongGe_List_Blue">{{item.size}}</text> -->
									<text class="Content_JiuGongGe_List_Blue">{{item.total}}</text>

								</view>

								<view class="Content_JiuGongGe_List" v-if="index!=0">

									<text class="Content_JiuGongGe_List_Blue">{{item.title}}</text>
									<text class="Content_JiuGongGe_List_Black"
										v-for="(itemIner,Index) in item.data">{{itemIner}}</text>
									<!-- <text class="Content_JiuGongGe_List_Blue">{{item.size}}</text>
									<text class="Content_JiuGongGe_List_Blue">{{item.size}}</text> -->
									<text class="Content_JiuGongGe_List_Black">{{item.total}}</text>

								</view>

								<view class="line" v-if="index<jiugonggeListData.length-1"></view>

							</view>

						</view>



					</view>
					<!-- 九宫格列表 结束 -->


					<!-- 扎号 列表  开始 -->
					<scroll-view scroll-y="true" class="content_zhahao_out">
						<view>


							<view class="content_zhahao_out_inner" v-for="(item,index) in zhahaoListData">


								<view class="content_zhahao_out_inner_top">

									<view class="content_zhahao_out_inner_top_left">
										<text class="content_zhahao_out_inner_top_left_text1">{{item.title}}</text>
										<text class="content_zhahao_out_inner_top_left_text2">{{item.time}}</text>
									</view>
									<view class="content_zhahao_out_inner_top_right" @click="clickZhaHao(item)">
										<text class="content_zhahao_out_inner_top_left_text3">...</text>
									</view>

								</view>



								<!-- 内容九宫格开始 -->

								<view class="baseListItemColorRight">


									<view class="baseListItemColorRightItem"
										v-for="(item2,index2) in zhahaoListData[index].list">
										<view class="baseListItemColorLeftInnerItemRight">

											<text class="baseListItemColorLeftInnerText_1">{{item2.title}}</text>
											<text class="baseListItemColorLeftInnerText">{{item2.content}}</text>
										</view>
									</view>


								</view>



							</view>
							<!-- 内容九宫格结束-->


						</view>

					</scroll-view>

					<!-- 扎号 列表  结束 -->



					<view class="loginContent">

						<button @click="OperationClickOpen()" style="color:#ffffff" class="login"
							type="default">{{login}}</button>
					</view>


				</view>



			</view>
		</scroll-view>




		<!--扎号 点击列表弹出 start-->
		<uni-popup ref="popupBag" type="bottom">
			<view class="bagDetail">

				<view class="baseList" v-for="(item,index) in sizeListData" @click="OperationClick(item)">
					<view class="baseListItem">

						<text class="baseListItemText_Red" v-if="index==4">{{item.title}}</text>

						<text class="baseListItemText" v-if="index!=4">{{item.title}}</text>
					</view>

					<view class="line" v-if="index<sizeListData.length && index!=4"></view>

					<view class="line_1" v-if="index==4"></view>
				</view>




			</view>
		</uni-popup>
		<!--扎号 点击列表弹出 end-->






		<!--底部操作按键 点击列表弹出 start-->
		<uni-popup ref="popupBottom" type="bottom">
			<view class="bagDetail">

				<view class="baseList" v-for="(item,index) in sizeListDataBottom" @click="OperationClickBottom(item)">
					<view class="baseListItem">

						<text class="baseListItemText_Red" v-if="index==2">{{item.title}}</text>

						<text class="baseListItemText" v-if="index!=2">{{item.title}}</text>
					</view>

					<view class="line" v-if="index<sizeListData.length && index!=2"></view>

					<view class="line_1" v-if="index==2"></view>
				</view>




			</view>
		</uni-popup>
		<!--底部操作按键 点击列表弹出 end-->





	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
  import {getNineSquareGridByOrderId,getOrderDetailById} from "@/pages/api/api";
  import config from "@/pages/api/config";

	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {

        apiUrl: config.apiUrl,
				//操作列表
				sizeListData: [{
						title: '编辑此扎'
					},
					{
						title: '设置此扎损耗'
					},
					{
						title: '查看此扎的登记'
					},
					{
						title: '查看此扎的二维码'
					},
					{
						title: '删除此扎'
					},
					{
						title: '取消'
					}
				],


				// 底部操作按键列表
				sizeListDataBottom: [{
						title: '单个添加扎'
					},
					{
						title: '批量添加扎'
					},
					// {
					// 	title: '发送裁床单'
					// },
					// {
					// 	title: '设置打印机'
					// },
					{
						title: '打印二维码'
					},
					{
						title: '取消'
					}
				],


				login: '操作',

				title: '详情',
				isback: true,

        itemdata: {},
				listData: [
        {
					title: '款号1',
					percent: 60,
				},
        ],


				//


				// 总裁
				listDataZongCai: [

					{
						title: '总裁',
						Value: '0',
            tableFie: 'allTotal',
						type: 1
					},
					{
						title: '总扎',
						Value: '0',
            tableFie: 'allqQuantity',
						type: 1
					},
					{
						title: '床号批次',
						Value: '',
            tableFie: 'batchs',
						type: 1
					},

					{
						title: '人员',
						Value: '',
            tableFie: 'createBy',
						type: 1
					},
					{
						title: '裁床日期',
						Value: '',
            tableFie: 'createTime',
						type: 1
					}

				],


				// 九宫格列表
				jiugonggeListData: [],

        list: [{
          title: '尺码',
          tableFie:'sizes',
          content: ''
        },
          {
            title: '颜色',
            tableFie: 'colors',
            content: ''
          },
          {
            title: '数量',
            tableFie: 'quantity',
            content: '0'
          },
          {
            title: '损耗',
            tableFile: 'lossQty',
            content: '0'
          },
          {
            title: '床号',
            tableFie: 'batchs',
            content: ''
          },
          {
            title: '',
            content: ''
          }
        ],
				// 扎号列表
				zhahaoListData: [
					{
						title: '扎号2',
						time: '2020-01-03',


						list: [{
								title: '尺码',
								content: ''
							},
							{
								title: '颜色',
								content: ''
							},
							{
								title: '数量',
								content: '0'
							},
							{
								title: '损耗',
								content: '0'
							},
							{
								title: '床号',
								content: '2'
							},
							{
								title: '人员',
								content: ''
							}
						]
					}

				],

				scrollViewHeight: 0,
        orderId: '',
        tenantId: '',
        storeId: '',
			}
		},
    onLoad: function (option) {
      console.log('option',option)
      let item = JSON.parse(decodeURIComponent(option.item));
      console.log('option item',item)
      this.tenantId = item.tenantId
      this.storeId = item.storeId
      this.orderId = item.id
      this.getOrderDetail(item)
      this.getNineSquareGridList(item.id)
			// 在其他页面或组件中访问
			const app = getApp();
			this.scrollViewHeight = app.globalData.scrollViewHeight2

			console.log('滚动距离', this.scrollViewHeight);
		},
		methods: {
      getOrderDetail(item){
        getOrderDetailById(item.id).then(res=>{
          if(res.code==200){
            let data = res.data
            this.itemdata = res.data
            this.itemdata.percent = item.percent==undefined?0:item.percent
            this.listDataZongCai.forEach(item=>{
              if(item.tableFie==='allTotal'){
                item.Value = data.allTotal
              }
              if(item.tableFie==='allqQuantity'){
                item.Value = data.allqQuantity
              }
              if(item.tableFie==='batchs'){
                item.Value = data.batchs
              }
              if(item.tableFie==='createBy'){
                item.Value = data.createBy
              }
              if(item.tableFie==='createTime'){
                item.Value = data.createTime
              }
            })
            this.zhahaoListData = []
            if(data.splittingUpList.length>0){
              // this.zhahaoListData

              data.splittingUpList.forEach(item=>{
                let list = JSON.parse(JSON.stringify(this.list));
                let bundleCode = item.bundleCode
                list.forEach(row=>{
                  if(row.tableFie==='sizes'){
                      row.content = item.sizes
                  }
                  if(row.tableFie==='colors'){
                    row.content = item.colors
                  }
                  if(row.tableFie==='quantity'){
                    row.content = item.quantity
                  }
                  if(row.tableFie==='lossQty'){
                    row.content = item.lossQty
                  }
                  if(row.tableFie==='batchs'){
                    row.content = item.batchs
                  }
                })
                let d = {
                  item: item,
                  title: '扎号'+bundleCode,
                  time: item.createTime,
                  list: list,
                }
                // console.log('ddd',JSON.stringify(d))
                this.zhahaoListData.push(d);
              })
            }
          }
        })
      },
      getNineSquareGridList(data){
        getNineSquareGridByOrderId(data).then(res=>{
          if(res.code==200){
            this.jiugonggeListData = res.data
          }
        })
      },

			OperationClickOpen() {

				this.openBottom()

			},

			// 点击 底部 操作按键
			OperationClickBottom(e) {
        let data = {
          tenantId: this.tenantId,
          storeId: this.storeId,
          orderId: this.orderId
        }

				switch (e.title) {
					case '批量添加扎':
						uni.navigateTo({
							url: '/subPackA/cuttingOrder/bulkAddition/bulkAddition?item='+encodeURIComponent(JSON.stringify(data)),
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break;

					case '设置打印机':

						uni.navigateTo({
							url: '/subPackA/cuttingOrder/setUpThePrinter/setUpThePrinter',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break;

					case '打印二维码':
            this.itemdata.orderId = this.orderId
						uni.navigateTo({
							url: '/subPackA/cuttingOrder/printQRCode/printQRCode?item='+encodeURIComponent(JSON.stringify(this.itemdata)),
							success: res => {},
							fail: () => {},
							complete: () => {}
						});


						break;
						case '单个添加扎':
						uni.navigateTo({
								url: '/subPackA/cuttingOrder/AddASingleTie/AddASingleTie?item='+encodeURIComponent(JSON.stringify(data)),
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break
					default:
						break;
				}
			},


			// 点击操作列表

			OperationClick(e) {


				switch (e.title) {
					case '编辑此扎':

						uni.navigateTo({
							url: '/subPackA/cuttingOrder/cuttingOrderEdit/cuttingOrderEdit?item='+encodeURIComponent(JSON.stringify(this.listItemData)),
							success: res => {},
							fail: () => {},
							complete: () => {}
						});

						break;
          case '设置此扎损耗':

            uni.navigateTo({
              url: '/subPackA/cuttingOrder/cuttingOrderEdit/cuttingOrderEdit?item='+encodeURIComponent(JSON.stringify(this.listItemData)),
              success: res => {},
              fail: () => {},
              complete: () => {}
            });

            break;
          case '查看此扎的登记':

            uni.navigateTo({
              url: '/subPackA/cuttingOrder/cuttingOrderDetail/splittUpScanCodeList?item='+encodeURIComponent(JSON.stringify(this.listItemData)),
              success: res => {},
              fail: () => {},
              complete: () => {}
            });

            break;
					case '查看此扎的二维码':
						uni.navigateTo({
							url: '/subPackA/cuttingOrder/zhaNumberQRCode/zhaNumberQRCode?item='+encodeURIComponent(JSON.stringify(this.listItemData)),
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						break;

					default:
						break;
				}

			},

			clickZhaHao(item) {
				this.open(item)
			},

			// 打开弹框
			open(e) {
				console.log('点了');
				this.$refs.popupBag.open('bottom')
				console.log('列表点击事件', e);
				this.listItemData = e


			},
			// 关闭尺码弹框
			close() {
				this.$refs.popupBag.close()
			},

			// 打开弹框
			openBottom(e) {
				console.log('点了');
				this.$refs.popupBottom.open('bottom')
				console.log('列表点击事件', e);
				this.listItemData = e


			},
			// 关闭尺码弹框
			closeBottom() {
				this.$refs.popupBottom.close()
			},
		}
	}
</script>

<style>
	.ContentScrollView {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.baseListItemText_Red {
		font-size: 24rpx;
		color: red;
		line-height: 100rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		font-weight: 600;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.baseListItemText {

		font-size: 24rpx;
		color: #333333;
		line-height: 100rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		font-weight: 600;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.baseListItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100rpx;
		justify-content: center;

	}


	.baseList {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		flex-wrap: wrap;

	}

	.baseListColor {
		display: flex;
		flex-direction: row;
		width: 500rpx;
		flex-wrap: wrap;

	}




	.bagDetailUpadte {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		/* border-radius: 20rpx 20rpx 0 0; */
		/* background-color: white; */
	}

	.bagDetailColor {

		width: 750rpx;
		height: 1073rpx;


		background: #FFFFFF;
		border-radius: 55rpx 55rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.bagDetail {
		width: 750rpx;
		height: 492rpx;
		background: #FFFFFF;
		border-radius: 55rpx 55rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;





	}







	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
		margin-bottom: 20rpx;


		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		margin-top: 60rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}


	.baseListItemColorLeftInnerBg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 10rpx;

		display: flex;
		justify-content: center;
		align-items: center;

		margin-right: 18rpx;


	}

	.baseListItemColorLeftInnerText_1 {
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #999999;
		line-height: 100rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.baseListItemColorLeftInnerText {

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;
		line-height: 100rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.baseListItemColorLeftInnerItemRight {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 315rpx;
		height: 80rpx;
		/* background: #F5F7F9; */
		border-radius: 20rpx;
	}

	.baseListItemColorRight {

		display: flex;
		flex-direction: row;
		justify-content: center;

		width: 630rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 10rpx;


		flex-wrap: wrap;


	}

	.baseListItemColorRightItem {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		flex: 0 0 calc((100%)/2);

	}






	.content_zhahao_out_inner_top_right {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.content_zhahao_out_inner_top_left_text3 {
		color: #0081FF;
		margin-right: 30rpx;

	}

	.content_zhahao_out_inner_top_left_text2 {
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 80rpx;
	}

	.content_zhahao_out_inner_top_left_text1 {
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
		line-height: 120rpx;
		margin-right: 40rpx;
		margin-left: 30rpx;

	}

	.content_zhahao_out_inner_top_left {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.content_zhahao_out_inner_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		width: 100%;

		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.content_zhahao_out_inner {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		margin-top: 10rpx;


		width: 100%;

		/* background-color: #0081FF; */

	}


	.content_zhahao_out {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 690rpx;
		height: 710rpx;
		background: #F5F7F9;
		border-radius: 20rpx;

		margin-top: 30rpx;



	}



	.line_1 {
		width: 100%;
		height: 16rpx;
		background: #F8F8F8;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #0081FF;
		/* background: #EEEEEE; */
	}

	.Content_JiuGongGe_List_Black {

		width: 33.3%;
		height: 100%;
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #666666;
		line-height: 36rpx;

		color: black;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.Content_JiuGongGe_List_Blue {
		width: 33.3%;
		height: 100%;
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #666666;
		line-height: 36rpx;

		color: #0081FF;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.Content_JiuGongGe_List {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		height: 80rpx;
		width: 100%;


	}

	.Content_JiuGongGe_List_OutSide {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 630rpx;
		/* height: 240rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.Content_JiuGongGe_List_Out {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 630rpx;
		height: 80rpx;


	}

	.Content_JiuGongGe_Title_Out {
		display: flex;
		justify-content: left;
		align-items: center;
		width: 100%;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
	}


	.Content_JiuGongGe_Title {
		width: 119rpx;
		height: 28rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
		line-height: 120rpx;
		margin-left: 30rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		text-align: left;

	}

	.Content_JiuGongGe {
		width: 690rpx;
		/* height: 370rpx; */
		background: #F5F7F9;
		border-radius: 20rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}





	.contentItemTextRight {
		font-size: 28rpx;
		font-weight: 600;
		color: #666666;
		margin-right: 30rpx;
		width: 200rpx;
		text-align: right;
	}

	.contentItemTextLeft {
		font-size: 28rpx;
		font-weight: 600;
		color: black;
		margin-left: 30rpx;
	}

	.contentItem2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 100%;
		height: 99rpx;



	}

	.contentItemRightContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}


	.contentItemTextLeftContent {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.contentItem {

		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 100%;
		height: 100rpx;

		border-radius: 30rpx 30rpx 0 0;
		/* background-color: aqua; */

	}


	.contentItem4 {
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/* background-color: bisque; */
	}

	.labelContent {
		font-size: 20rpx;
		font-weight: 600;
	}

	.contentItem3 {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-evenly;
		width: 100%;
		height: 100rpx;

	}

	.listContent {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.listContentGongxu {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;

		background: #F5F7F9;
		border-radius: 30rpx;



	}


	.line {
		width: 100%;
		height: 1rpx;
		background: #EEEEEE;
	}

	.contentListOut {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;

	}


	.ContentZongCai {

		width: 690rpx;
		height: 501rpx;
		background: #F5F7F9;
		border-radius: 20rpx;

		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;
	}

	.Content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 750rpx;
		margin-top: 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}






	.listDataInnerTopRightText {
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;
		line-height: 50rpx;
	}


	.listDataInnerTopRightImgBg {
		display: flex;
		justify-content: center;
		align-items: center;

		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.listDataInnerTopRightImg {
		width: 50rpx;
		height: 50rpx;
		padding: 10rpx;

	}

	.listDataInnerTopRight {
		display: flex;
		flex-direction: column;
		align-items: left;


		margin-top: 30rpx;
	}

	.listDataInnerTopLeft {
		width: 190rpx;
		height: 190rpx;
		background: #ECF5FD;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		margin-right: 30rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}

	.listDataInnerTopLeftImg {
		width: 188rpx;
		height: 148rpx;

	}

	.progress-box_progress {
		display: flex;
		width: 380rpx;
		height: 10rpx;
		border-radius: 5rpx;
	}

	.progress-box_text {
		color: #666666;
		margin-left: 30rpx;
		font-size: 24rpx;
		font-weight: 600;
	}

	.progress-box_text1 {
		color: #0081FF;
		margin-left: 10rpx;
		font-size: 24rpx;
	}

	.progress-box {

		display: flex;
		flex-direction: row;

		display: flex;
		justify-conent: left;
		width: 380rpx;
		height: 6rpx;
		border-radius: 5rpx;

		/* background-color: #333333; */
	}

	.progress-box_out {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;

		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;

		border-radius: 5rpx;

		/* background-color: #333333; */
	}


	.listDataInnerTop {
		position: relative;
		display: flex;
		flex-direction: row;

		display: flex;
		justify-content: left;
		width: 100%;
		/* background: #0AE1C6; */


	}

	.Content {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.listDataOut {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 750rpx;
		margin-top: 30rpx;

	}

	.listDataInner {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;

		/*width: 690rpx;*/
		width: 750rpx;
		height: 295rpx;
		background: #FFFFFF;
		border-radius: 30rpx;



	}

	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;

	}
</style>
